<template>
	<view class="allbox">
		<view class="head">
			<view class="head_img">
				<view class="head_size">智慧社区</view>
				<view class="tiancheng">
					<view class="tiancheng_left">
						<view class="tiancheng_left_dingw">

							<!-- 	<image src="/static/image/dingwei.png" style="width: 35rpx;" mode=""></image> -->
							<image src="/static/image/dili.png" style="width: 35rpx; height: 35rpx;" mode=""></image>
						</view>
						<view class="tiancheng_left_size">首尔甜城</view>
					</view>
					<view class="tiancheng_right">
						<view class="tiancheng_right_sousuo">
							<image src="/static/image/wen.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
						</view>
						<view class="tiancheng_right_size">
							<input type="text" style="width: 180rpx; height: 40rpx; font-size: 19rpx"
								placeholder="搜索关键字" />
						</view>
					</view>
				</view>
			</view>

		</view>

		<view class="dingwei">
			<view class="dingwei_zhong">
				<view class="xiaohe" @click="exist" >
					<view class="xiaohe_tu">
						<image src="/static/image/qianqian.png" mode="" class="immg"></image>
					</view>
					<view class="class_size">
						生活缴费
					</view>
				</view>



				<view class="xiaohe" @click="bao" >
					<view class="xiaohe_tu2">
						<!-- <image src="/static/image/fangzi2 .png" mode="" class="immg"></image> -->
						<image src="/static/image/baoxiu.png" mode="" class="immg"></image>
					</view>
					<view class="class_size">
						物业保修
					</view>
				</view>

				<view class="xiaohe"  @click="fan" >
					<view class="xiaohe_tu3">
						<image src="/static/image/wenti.png" mode="" class="immg"></image>
					</view>
					<view class="class_size">
						问题反馈
					</view>
				</view>

				<view class="xiaohe" @click="bang" >
					<view class="xiaohe_tu4">
						<!-- <image src="/static/image/xinxi.png" mode="" class="immg"></image>
							<!-- <image src="/static/image/ingin.jpg" mode=""></image> -->
						<image src="/static/image/xinxi.png" mode="" class="immg"></image>
					</view>
					<view class="class_size">
						我要帮助
					</view>
				</view>
			</view>
		</view>

		<view class="zhong">
			<view class="center">
				<view class="center_top" @click="headline" >
					<!-- <view class=""> -->
					<view class="center_juzhong">
						<image src="/static/image/tot.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
					</view>
					<view class="gyu">
						关于我行对符合条件的账户...
					</view>
					<!-- </view> -->


				</view>
				<view class="center_bottom">
					<image src="../../static/image/th.jpg" mode=""></image>
				</view>
			</view>

			<!-- 生活门店 -->
			<view class="biaoqian">生活门店</view>
			<!-- 生活缴费 -->
			<view class="jioafei"  >
				<view class="jiaofei_boox" @click="exist" >
					<image src="@/static/image/jiaofei.jpg" mode=""></image>
				</view>
				<view class="jiaofei_boox" @click="shop" >
					<image src="@/static/image/jiaofei.jpg" mode=""></image>
				</view>
			</view>
			<!-- 资讯 -->
			<view class="biaoqian">
				<view class="zixuns">
					资讯
				</view>
				<view class="biaoqian_right" @click="news" >
					<uni-icons type="right" size="25"></uni-icons>
				</view>
			</view>
			<!-- 详情 -->
			<view class="zixun" @click="headline" >
				<view class="zixun_left">
					<view class="zixun_left_top">
						关于调整我行ATM
					</view>
					<view class="zixun_left_bottom">
						2021-11-01
					</view>

				</view>
				<view class="zixun_right">
					<image src="../../static/image/liebiao.png" mode=""></image>
				</view>
			</view>
			<!-- 2 -->
			<view class="zixun" @click="headline" >
				<view class="zixun_left">
					<view class="zixun_left_top">
						关于调整我行ATM
					</view>
					<view class="zixun_left_bottom">
						2021-11-01
					</view>
			
				</view>
				<view class="zixun_right">
					<image src="../../static/image/liebiao.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			exist(){
				uni.navigateTo({
					url:'/pages/livingPayment/livingPayment'
				})
			},
			bao(){
				uni.navigateTo({
					url:'/pages/repair/repair'
				})
			},
			fan(){
				uni.navigateTo({
					url:'/pages/repairRecord2/repairRecord2'
				})
			},
			bang(){
				uni.navigateTo({
					url:'/pages/assist/assist'
				})
			},
			headline(){
				uni.navigateTo({
					url:'/pages/dynamicDetail/dynamicDetail'
				})
			},
			news(){
				uni.navigateTo({
					url:'/pages/Information/Information'
				})
			},
			shop(){
				uni.switchTab({
					url:'/pages/shoplist/shoplist'
				})
			}
		}
	}
</script>

<style lang="less">
	// page{
	// 	width: 100%;
	// 	height: 100%;
	// }
	.immg {
		width: 100%;
		height: 100%;
	}

	page {
		background-color: #f6f6f6;
	}

	.gengd {
		width: 150rpx;
		height: 50rpx;
		background-color: red;
		margin-left: 200rpx;
	}

	

	.allbox {
		position: relative;

		// 头部
		.head {
			width: 100%;


			.head_img {
				width: 100%;
				height: 345rpx;
				// background-image: url(@/image/indeback.png);
				background-image: url(/static/image/ingin.jpg);
				background-size: cover;
				background-position: center;

				.head_size {
					width: 100%;
					height: 105rpx;

					text-align: center;
					line-height: 130rpx;
					color: #fff;
					font-size: 32rpx;
				}

				.tiancheng {
					width: 91.3%;
					height: 100rpx;
					margin: auto;

					display: flex;
					justify-content: space-around;
					align-items: center;

					.tiancheng_left {
						width: 60%;

						display: flex;
						align-items: center;
						color: #fff;

						.tiancheng_left_dingw {
							width: 43rpx;
							height: 100rpx;

							line-height: 110rpx;

						}

						.tiancheng_left_size {
							font-size: 26rpx;
						}
					}

					.tiancheng_right {
						width: 240rpx;
						// width: 32%;
						background-color: #fff;

						height: 40rpx;
						border-radius: 50rpx;
						display: flex;
						align-items: center;

						.tiancheng_right_sousuo {
							width: 35rpx;
							// background-image: url(@/image/seach.png);
							// background-image: url(../shoplist/image/shang_01.jpg);
						}

						.tiancheng_right_size {
							font-size: 16rpx;
						}
					}
				}
			}




		}

		// 定位
		.dingwei {
			width: 90%;
			// width: 684rpx;
			height: 200rpx;
			background-color: #fff;
			margin: 0 auto;

			position: absolute;

			top: 210rpx;
			left: 400rpx;
			margin-left: -365rpx;
			border-radius: 25rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.dingwei_zhong {
				width: 91.5%;
				height: 112rpx;
				display: flex;
				justify-content: space-between;

				// background-color: pink;
				.xiaohe {
					width: 100rpx;
					height: 100rpx;
					// background-color: burlywood;
					.xiaohe_tu {
						background-size: cover;
						width: 60rpx;
						height: 60rpx;
						background-color: #4f86ed;
						margin: auto;
						border-radius: 10rpx;
					}

					.xiaohe_tu2 {
						background-size: cover;
						width: 60rpx;
						height: 60rpx;
						background-color: #72b78b;
						margin: auto;
						border-radius: 10rpx;
					}

					.xiaohe_tu3 {
						background-size: cover;
						width: 60rpx;
						height: 60rpx;
						background-color: #e39e5d;
						margin: auto;
						border-radius: 10rpx;
					}

					.xiaohe_tu4 {
						background-size: cover;
						width: 60rpx;
						height: 60rpx;
						background-color: #479cf7;
						margin: auto;
						border-radius: 10rpx;
					}

					.class_size {
						font-size: 20rpx;
						text-align: center;
					}
				}
			}

		}

		.dingwei {
			// margin: 0 auto;
			display: flex;
			justify-content: center;
		}

		// 头条
		.zhong {
			width: 100%;
			margin-top: 105rpx;
			background-color: #fff;

			.center {
				// width: 100%;
				// height: 352rpx;
				// background-color: #fff;

				.center_top {
					width: 91.5%;
					height: 60rpx;
					// background-color: gold;
					margin: auto;
					display: flex;
					// align-items: center;
					line-height: 50rpx;

					.center_juzhong {
						// background-image: url(../images/toutiao.png);
						// background-image: url(@/image/toutiao.png);
						// background-image: url(/image/tx.png);
						width: 100rpx;
						height: 49rpx;
						// background-color: oldlace;
						background-size: cover;
						line-height: 49rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.gyu {
						width: 350rpx;
						height: 40rpx;
						font-size: 25rpx;
						// background-color: red;
						margin-left: 20rpx;
					}
				}

				.center_bottom {
					width: 91.5%;
					height: 250rpx;
					// background-color: blueviolet;
					margin: auto;

					// background-image: url(@/image/dig.jpg);
					// background-image: url(/static/image/th.jpg);
					background-size: cover;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}

			.biaoqian {
				width: 91.5%;
				height: 130rpx;
				// background-color: palegreen;
				margin: auto;
				font-size: 34rpx;
				// font-weight: bold;
				line-height: 130rpx;
				display: flex;
				justify-content: space-between;
				// .zixuns{

				// }
				.biaoqian_right {
					color: #898989;
				}
			}

			// 缴费
			.jioafei {
				width: 91.5%;
				height: 204rpx;
				margin: auto;
				// background-color: gold;
				display: flex;
				justify-content: space-between;

				.jiaofei_boox {
					width: 330rpx;
					height: 100%;
					background-color: rebeccapurple;

					// background-image: url(/static/image/jiaofei.jpg);
					background-size: cover;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}

			// 详情
			.zixun {
				width: 91.5%;
				margin: auto;
				display: flex;
				justify-content: space-between;
				margin-bottom: 50rpx;

				.zixun_left {
					width: 374rpx;
					height: 160rpx;

					// background-color: deeppink;
					.zixun_left_top {
						height: 130rpx;
						font-size: 30rpx;
					}

					.zixun_left_bottom {
						color: #5f5f5f;
						font-size: 26rpx;
					}
				}

				.zixun_right {
					width: 248rpx;
					height: 160rpx;
					// background-color: burlywood;
					// background-image: url(/static/image/liebiao.png);
					background-size: cover;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}

	}
</style>